<template>
  <div class="ResultDetails-Panel" v-loading="State.Loading">
    <div class="ResultDetails-Option">
      <!-- <div class="ResultDetails-Option-Model" v-for="(item, index) in State.ResultDetailsOption" :key="index"
        @click="SelectOption(index)" :class="State.SelectOptionIndex === index ? 'SeleteOptionActive' : 'Noactive'">
        <span>{{ item.OptionName }}</span>
      </div> -->
      <div class="ResultDetails-Option-Model SeleteOptionActive">
        <span>操作记录</span>
      </div>
    </div>
    <div class="ResultDetails-PersonalInformation" v-if="State.MathBoolean === 0">
      <div class="ResultDetails-PersonalInformation-Model" v-for="(item, index) in State.MathPersonalInformation"
        :key="index">
        <span>{{ item.Name }}</span>
        <span></span>
        <span>{{ item.value }}</span>
      </div>
    </div>
    <div class="ResultDetails-PersonalInformation" v-else>
      <div class="ResultDetails-PersonalInformation-Model" v-for="(item, index) in State.PersonalInformation"
        :key="index">
        <span>{{ item.Name }}</span>
        <span></span>
        <span>{{ item.value }}</span>
      </div>
    </div>
    <!-- 操作记录 -->
    <div v-show="State.SelectOptionIndex === 1" style="height: 660px;">
      <el-scrollbar class="elscrollbar">
        <div class="OperationRecord" v-for="(item, index) in State.ResultlCompleted" :key="index">
          <div class="Module">{{ item.Module }}</div>
          <div class="OperationRecord-model" v-for="items in item.Records">
            <div v-if="items.includes('成功') || items.includes('解析正确')">
              <span>已完成</span>
            </div>
            <div
              v-else-if="items.includes('失败') || items.includes('错误') || items.includes('未安装') || items.includes('未解析') || items.includes('解析错误')"
              class="OperationRecord-false">
              <span>未完成</span>
            </div>
            <div>{{ items }}</div>
          </div>
        </div>

      </el-scrollbar>
    </div>
  </div>
</template>

<script>
let echarts = require("echarts");
import { defineComponent, reactive, ref, onMounted, toRef, toRefs } from "vue";
import bus from "@/bus.js";
import { ArrowDown } from '@element-plus/icons'
import HomeContent from '../HomeContent'
export default defineComponent({
  name: "ResultDetails",
  components: {
    ArrowDown
  },
  props: {
    ResultDetails: {
      type: Object,
      default: () => { },
    },
    MatchBoolean: {
      type: Number,
      default: 1,
    },
  },
  setup(props, ctx) {
    // let RadarChart = ref('')
    // let FaultPanelInformation = reactive({
    //   Tip01: "1 : 故障现象确认",
    //   Appearence: "",
    //   Tip02: "2 : 模块故障状态及故障码检查",
    //   Code: "",
    //   Tip03: "3 : 正确读取数据",
    //   DataStream: [
    //     { name: "", shuzhi: "", danwei: "", radio: "" },
    //   ],
    //   Tip04: "4 : 清除故障并再次读取",
    //   KeyPair: -1,
    //   KeyPairValue: "",
    //   Tip05: "5 : 确定故障范围",
    //   PointRange: "",
    //   Tip06: "6 : 基本检查",
    //   Tip1: 1,
    //   Tip2: 1,
    //   Tip06: "6 : 部件/电路测试",
    //   DataStreamTwo: [
    //     { Key: "", Value: "" },
    //     { Key: "", Value: "" },
    //     { Key: "", Value: "" },
    //   ],
    //   Tip07: "7 : 故障确认和排除",
    //   FaultPointInfo: ''
    // })
    let State = reactive(
      {
        //工单名称
        // WorkOrderName: '工单记录',
        Loading: true,
        //成绩选项
        ResultDetailsOption: [
          // {
          //   OptionName: "综合结果分析"
          // },
          {
            OptionName: "操作记录"
          },
          // {
          //   OptionName: "故障修复记录"
          // }
        ],
        //工单数组
        WorkOrderArr: [],
        //工单所有数据
        orders: '',
        MathBoolean: false,
        //选项
        SelectOptionIndex: 1,
        //个人信息
        MathPersonalInformation: [
          {
            Name: "任务",
            value: sessionStorage.getItem("TaskTitle")
          },
          {
            Name: "姓名",
            value: sessionStorage.getItem("StudentName")
          },
          {
            Name: "用时",
            value: FNumToDate(props.ResultDetails.time)
          },
          {
            Name: "总得分",
            value: props.ResultDetails.score
          }
        ],
        PersonalInformation: [
          {
            Name: "任务",
            value: props.ResultDetails.trainingTaskName
          },
          {
            Name: "姓名",
            value: props.ResultDetails.userName
          },
          {
            Name: "用时",
            value: FNumToDate(props.ResultDetails.time)
          },
          {
            Name: "总得分",
            value: props.ResultDetails.score
          }
        ],
        //综合信息
        ResultAnalysisArr: [],
        //任务完成信息
        ResultlCompleted: '',
        Points: '',
      }
    )
    //选择工单列表执行的操作(总工单数据处理)
    // function handleCommand(index) {
    //   if (State.WorkOrderArr[0].Name === "暂无工单") {
    //     return
    //   } else {
    //     State.WorkOrderName = State.WorkOrderArr[index].Name
    //     State.SelectOptionIndex = 3
    //     ProcessWorkorderSeparately(State.orders, index)
    //   }
    // }
    //用于判断是否是比赛进入还是普通进入查询成绩
    State.MathBoolean = props.MatchBoolean
    //处理时间函数
    function FNumToDate(seconds) {
      let hour = Math.floor(seconds / 3600) >= 10 ? Math.floor(seconds / 3600) : '0' + Math.floor(seconds / 3600);
      seconds -= 3600 * hour;
      let min = Math.floor(seconds / 60) >= 10 ? Math.floor(seconds / 60) : '0' + Math.floor(seconds / 60);
      seconds -= 60 * min;
      let sec = seconds >= 10 ? seconds : '0' + seconds;
      return hour + ':' + min + ':' + sec;
    }
    //选择哪个模块
    // function SelectOption(index) {
    //   State.SelectOptionIndex = index
    // }
    //处理数值
    function ProcessingData(datas) {
      // let keys = Object.keys(datas)
      // let values = Object.values(datas)
      // let data = keys.map((key, index) => key.concat(`,${values[index]}`))
      // let RadarValueArr = []
      // for (let i = 0; i < data.length; i++) {
      //   let C = data[i].split(",")
      //   let D = {
      //     name: C[0],
      //     Completed: C[1],
      //   }
      //   RadarValueArr.push(D)
      // }
      // return RadarValueArr
    }
    //单独处理工单的数据
    // function ProcessWorkorderSeparately(orders, WorkorderIndex) {
    //   if (orders.Appraises.length !== 0) {
    //     if (Object.keys(orders.Appraises[WorkorderIndex].DataStream).length !== 0) {
    //       let DataStream = orders.Appraises[WorkorderIndex].DataStream
    //       let DataStreamkeys = Object.keys(DataStream)
    //       let DataStreamvalues = Object.values(DataStream)
    //       let data = DataStreamkeys.map((key, index) => key.concat(`,${DataStreamvalues[index]}`))
    //       let DataStreamArr = []
    //       for (let i = 0; i < data.length; i++) {
    //         let C = data[i].split(",")
    //         let D = {
    //           name: C[0],
    //           value: C[1],
    //           unit: C[2],
    //           temporary: C[3],
    //           judge: parseInt(C[4]),
    //         }
    //         DataStreamArr.push(D)
    //       }
    //       FaultPanelInformation.DataStream = DataStreamArr
    //     } else {
    //       FaultPanelInformation.DataStream = [{ name: "", shuzhi: "", danwei: "", radio: "" }]
    //     }

    //     if (orders.Appraises[WorkorderIndex].Appearence) {
    //       if (Object.keys(orders.Appraises[WorkorderIndex].Appearence).length !== 0) {
    //         let AppearenceInfo = orders.Appraises[WorkorderIndex].Appearence.split(",")
    //         let AppearenceInfoArr = []
    //         for (let i = 0; i < AppearenceInfo.length; i++) {
    //           let A = {
    //             Error: AppearenceInfo[i]
    //           }
    //           AppearenceInfoArr.push(A)
    //         }
    //         FaultPanelInformation.Appearence = AppearenceInfoArr
    //       }
    //     } else {
    //       FaultPanelInformation.Appearence = ''
    //     }

    //     if (orders.Appraises[WorkorderIndex].Code) {
    //       if (Object.keys(orders.Appraises[WorkorderIndex].Code).length !== 0) {
    //         let CodeInfo = orders.Appraises[WorkorderIndex].Code.split(",")
    //         let CodeInfoArr = []
    //         for (let i = 0; i < CodeInfo.length; i++) {
    //           let A = {
    //             Error: CodeInfo[i]
    //           }
    //           CodeInfoArr.push(A)
    //         }
    //         FaultPanelInformation.Code = CodeInfoArr
    //       }
    //     } else {
    //       FaultPanelInformation.Code = ''
    //     }


    //     if (orders.Appraises[WorkorderIndex].PointRange) {
    //       if (Object.keys(orders.Appraises[WorkorderIndex].PointRange).length !== 0) {
    //         let PointRangeInfo = orders.Appraises[WorkorderIndex].PointRange.split(",")
    //         let PointRangeInfoArr = []
    //         for (let i = 0; i < PointRangeInfo.length; i++) {
    //           let A = {
    //             PointRangeError: PointRangeInfo[i]
    //           }
    //           PointRangeInfoArr.push(A)
    //         }
    //         FaultPanelInformation.PointRange = PointRangeInfoArr
    //       }
    //     } else {
    //       FaultPanelInformation.PointRange = ''
    //     }
    //     FaultPanelInformation.KeyPairValue = orders.Appraises[WorkorderIndex].Recode.Value
    //     FaultPanelInformation.KeyPair = orders.Appraises[WorkorderIndex].Recode.Key
    //     FaultPanelInformation.DataStreamTwo = orders.Appraises[WorkorderIndex].PointCheck
    //     if (orders.Appraises[WorkorderIndex].FaultPointInfo) {
    //       if (Object.keys(orders.Appraises[WorkorderIndex].FaultPointInfo).length !== 0) {
    //         let FaultPointInfo = orders.Appraises[WorkorderIndex].FaultPointInfo.split(",")
    //         let FaultPointInfoArr = []
    //         for (let i = 0; i < FaultPointInfo.length; i++) {
    //           let A = {
    //             Error: FaultPointInfo[i]
    //           }
    //           FaultPointInfoArr.push(A)
    //         }
    //         FaultPanelInformation.FaultPointInfo = FaultPointInfoArr
    //       }
    //     } else {
    //       FaultPanelInformation.FaultPointInfo = ''
    //     }
    //   }
    // }
    //处理传过来的数值
    function HandleResult(WorkorderIndex) {
      let Result = props.ResultDetails
      console.log(Result);
      // if (Result.orders == '') {
      //   Result.orders = null
      // }
      // let orders = JSON.parse(Result.orders)
      // console.log('++++++++++++++++++++++', orders);
      // State.orders = orders
      // if (orders) {
      //   let keys = Object.keys(orders.ComprehensiveResultsAnalysis.RadarValue)
      //   let values = Object.values(orders.ComprehensiveResultsAnalysis.RadarValue)
      //   let data = keys.map((key, index) => key.concat(`,${values[index]}`))
      //   let RadarValueArr = []
      //   for (let i = 0; i < data.length; i++) {
      //     let C = data[i].split(",")
      //     let D = {
      //       name: C[0],
      //       process: C[1],
      //     }
      //     RadarValueArr.push(D)
      //   }
      //   State.ResultAnalysisArr = RadarValueArr
      //   if (orders.Appraises.length === 0 || orders.Appraises === '') {
      //     State.WorkOrderArr.push({
      //       Name: "暂无工单"
      //     })
      //   } else {
      //     for (let i = 0; i < orders.Appraises.length; i++) {
      //       State.WorkOrderArr.push({
      //         Name: orders.Appraises[i].Name
      //       })
      //     }
      //   }
      //   let arr = []
      //   let indicator = []
      //   for (let i = 0; i < RadarValueArr.length; i++) {
      //     arr.push(RadarValueArr[i].process)
      //   }
      //   for (let i = 0; i < State.ResultAnalysisArr.length; i++) {
      //     arr.push(State.ResultAnalysisArr[i].process)
      //     indicator.push(
      //       { text: State.ResultAnalysisArr[i].name, max: 100 }
      //     )
      //   }
      //   // RadarChart.value.setOption({
      //   //   radar: [
      //   //     {
      //   //       indicator: indicator
      //   //     },
      //   //   ],
      //   //   series: [
      //   //     {
      //   //       data: [
      //   //         {
      //   //           value: arr,
      //   //           name: "成绩",
      //   //         }
      //   //       ]
      //   //     }
      //   //   ]
      //   // })
      //   //操作记录
      // State.ResultlCompleted = ProcessingData(orders.OperationSteps)
      State.ResultlCompleted = HomeContent.Default.operateRecord.value
      console.log('State.ResultlCompleted操作记录', State.ResultlCompleted);

      //   //故障修复记录
      //   State.Points = ProcessingData(orders.ComprehensiveResultsAnalysis.Points)
      // } else {
      //   //显示暂无工单
      //   State.WorkOrderArr.push({
      //     Name: "暂无工单"
      //   })
      //   //没有成绩的时候显示
      //   State.ResultAnalysisArr = [
      //     { name: '工艺流程', process: 0 },
      //     { name: '操作规范', process: 0 },
      //     { name: '工具使用', process: 0 },
      //     { name: '安全意识', process: 0 },
      //     { name: '技能熟练', process: 0 },
      //   ]
      //   // RadarChart.value.setOption({
      //   //   radar: [
      //   //     {
      //   //       indicator: [
      //   //         { text: '工艺流程', max: 100 },
      //   //         { text: '操作规范', max: 100 },
      //   //         { text: '工具使用', max: 100 },
      //   //         { text: '安全意识', max: 100 },
      //   //         { text: '技能熟练', max: 100 }
      //   //       ]
      //   //     },
      //   //   ],
      //   //   series: [
      //   //     {
      //   //       data: [
      //   //         {
      //   //           value: [0, 0, 0, 0, 0],
      //   //           name: '成绩',
      //   //         }
      //   //       ]
      //   //     }
      //   //   ]
      //   // })
      // }
    }
    onMounted(() => {
      console.log('jinlai激光雷达103的详情页了么');

      //获取雷达图的Demo
      HandleResult(0)
      State.Loading = false
    });
    return {
      State,
      // RadarChart,
      // SelectOption,
      // FaultPanelInformation,
      // handleCommand
    };
  },
});
</script>
<style scoped lang="less">
.ResultDetails-Panel {
  margin-left: 15px;
  width: 98%;
  height: 90%;
  // background:blue;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
}

.ResultDetails-Option {
  width: 100%;
  height: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ResultDetails-Option-Model {
  width: 160px;
  height: 40px;
  background: rgba(129, 133, 156, 0.2);
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 20px !important;
}

.ResultDetails-Option>div:nth-child(1) {
  border-radius: 20px 0px 0px 20px;
}

.ResultDetails-Option>div:nth-last-child(1) {
  border-radius: 0px 20px 20px 0px;
}

.SeleteOptionActive {
  background: linear-gradient(-90deg, #0974d8, #3d8ef1, #7c7ff8);
  color: #FFFFFF;
}

.Noactive {
  background: rgba(129, 133, 156, 0.1);
}

.ResultDetails-PersonalInformation {
  width: 100%;
  height: 10%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0px 1px 0px 0px rgba(129, 133, 156, 0.2);
}

.ResultDetails-PersonalInformation-Model {
  width: 300px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ResultDetails-PersonalInformation>div:nth-child(1) {
  width: 600px;
}

.ResultDetails-PersonalInformation-Model>span:nth-child(1) {
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859C;
}

.ResultDetails-PersonalInformation-Model>span:nth-child(2) {
  width: 2px;
  height: 16px;
  margin-left: 20px;
  background: #218CDE;
}

.ResultDetails-PersonalInformation-Model>span:nth-child(3) {
  margin-left: 20px;
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859C;
}

.RadarChartPanel {
  position: absolute;
  margin-left: 100px;
  margin-top: 50px;
  width: 35%;
  height: 65%;
}

#RadarChart {
  width: 100%;
  height: 100%;
}

.ComprehensiveResultsPanel {
  position: absolute;
  right: 150px;
  margin-top: 70px;
  width: 35%;
  height: 65%;
}

.ComprehensiveResultsPanel>div:nth-child(1) {
  position: absolute;
  width: 100%;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 36px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  background: linear-gradient(0deg, #807DE1 0%, #218CDE 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ComprehensiveResultsPanel>div:nth-child(2) {
  margin-top: 60px;
  width: 100%;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 300;
  color: #81859C;
}

.ComprehensiveResultsPanel>div:nth-child(3) {
  margin-top: 20px;
  width: 100%;
  min-height: 30px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.ComprehensiveResultsPanel>div:nth-child(3) span {
  width: 90px;
  min-height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 300;
  color: #FFFFFF;
  background: linear-gradient(90deg, #807DE1, #218CDE);
}

.ComprehensiveResultsPanel>div:nth-child(4) {
  margin-top: 10px;
  width: 100%;
  height: 70%;
}

.Resultl-list-item {
  width: 600px;
  height: 60px;
  background: rgba(54, 56, 75, 0);
  box-shadow: 0px -1px 0px 0px rgba(54, 56, 75, 0.2);
}

.Resultl-list-classification {
  position: absolute;
  width: 80px;
  height: 60px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 16px;
  font-family: Arial;
  font-weight: 400;
  color: #81859C;
}

.Resultl-list-number {
  position: absolute;
  width: 98%;
  height: 60px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 16px;
  font-family: Arial;
  font-weight: 400;
  color: #1B1B1D;
}

.ResultAnalysisPanel>div:nth-last-child(1) {
  border-bottom: 1px solid rgba(54, 56, 75, 0.2);
}

//操作记录
.OperationRecord {
  // position: absolute;
  // width: 98%;
  // height: 70%;
}

.Module {
  float: left;
  font-size: 25px;
  margin-top: 20px;
  margin-left: 23px;
}

.OperationRecord .elscrollbar {
  position: absolute;
  height: 100%;
  width: 100%;
}

.OperationRecord-model {
  margin-left: 20px;
  width: 98%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-bottom: 1px solid rgba(54, 56, 75, 0.2);
}

.OperationRecord .el-scrollbar__view>div:nth-child(1) {
  margin-top: 0px;
}

.OperationRecord-model>div:nth-child(1) {
  width: 5%;
  height: 30px;
  background: rgba(73, 141, 64, 0);
  border: 1px solid #498D40;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859C;
}

.OperationRecord-false {
  border: 1px solid #BF3434 !important;
}

.OperationRecord-model>div:nth-child(2) {
  margin-left: 10px;
  font-size: 22px;
}

//故障记录
.FaultRecordPanel {
  position: absolute;
  width: 98%;
  height: 70%;
}

.FaultRecordPanel .elscrollbar {
  position: absolute;
  height: 100%;
  width: 100%;
}

.FaultRecordPanel-model {
  margin-left: 20px;
  width: 98%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-bottom: 1px solid rgba(54, 56, 75, 0.2);
}

.FaultRecordPanel-model>div:nth-child(1) {
  width: 5%;
  height: 30px;
  background: rgba(73, 141, 64, 0);
  border: 1px solid #498D40;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859C;
}

.FaultRecordPanel-false {
  border: 1px solid #BF3434 !important;
}

.FaultRecordPanel-model>div:nth-child(2) {
  margin-left: 10px;
  font-size: 22px;
}

//操作详细记录
.DetailedPperation {
  position: absolute;
  width: 98%;
  height: 72%;
}

.DetailedPperation .elscrollbar {
  position: absolute;
  height: 100%;
  width: 100%;
}

.FaultPanel-01>div:nth-child(1),
.FaultPanel-02>div:nth-child(1),
.FaultPanel-03>div:nth-child(1),
.FaultPanel-04>div:nth-child(1),
.FaultPanel-05>div:nth-child(1),
.FaultPanel-06>div:nth-child(1),
.FaultPanel-07>div:nth-child(1) {
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 22px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859C;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-left: 20px;
}

.FaultPanel-01-model-panel {
  position: relative;
  width: 30%;
  min-height: 100px;
  border-radius: 15px;
  background: rgba(129, 133, 156, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859C;
}

.FaultPanel-01-Model {
  width: 95%;
  height: 30px;
  border: 1px solid #81859c;
  margin-top: 10px;
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-radius: 10px;
  font-size: 16px;
}

.FaultPanel-01-Model span {
  margin-left: 10px;
}

.FaultPanel-01-model-panel>div:nth-last-child(1) {
  margin-bottom: 10px;
}

.FaultPanel-02-model-panel {
  position: relative;
  width: 30%;
  min-height: 100px;
  border-radius: 15px;
  background: rgba(129, 133, 156, 0.05);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859C;
}

.FaultPanel-02-Model {
  width: 30%;
  height: 30px;
  border: 1px solid #81859c;
  margin-top: 10px;
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 16px;
}

.FaultPanel-02-Model span {
  margin-left: 10px;
}

// .FaultPanel-02>div:nth-child(2){
//   width: 99%;
//   min-height: 100px;
//   font-size: 18px;
//   text-indent: 20px;
//   border-radius: 15px;
//   background: rgba(129, 133, 156, 0.1);
//   display: flex;
//   align-items: flex-start;
//   justify-content: flex-start;
//   font-family: Source Han Sans CN;
//   font-weight: 400;
//   color: #81859C;
// }
.FaultPanel-03 {
  position: relative;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859C;
}

.FaultPanel-03>div:nth-child(2) {
  width: 60%;
  border-radius: 15px;
  background: rgba(129, 133, 156, 0.05);
}

.FaultPanel-03-item {
  position: absolute;
  padding-top: 10px;
  width: 100%;
  height: 30px;
}

.FaultPanel-03-item span {
  position: absolute;
  font-size: 16px;
  width: 200px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.FaultPanel-03-item>span:nth-child(1) {
  left: 0px;
}

.FaultPanel-03-item>span:nth-child(2) {
  position: absolute;
  left: 200px;
}

.FaultPanel-03-item>span:nth-child(3) {
  position: absolute;
  left: 400px;
}

.FaultPanel-03-item>span:nth-child(4) {
  position: absolute;
  left: 700px;
}

.FaultPanel-03-model-panel {
  position: relative;
  padding-top: 35px;
}

.FaultPanel-03-model {
  margin-top: 20px;
}

.FaultPanel-03-model>span:nth-child(1) {
  position: absolute;
  font-size: 16px;
  width: 200px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0px;
}

.FaultPanel-03-model>span:nth-child(2) {
  position: absolute;
  font-size: 16px;
  width: 200px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 200px;
}

.FaultPanel-03-model>span:nth-child(3) {
  position: absolute;
  font-size: 16px;
  width: 200px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 400px;
}

.FaultPanel-03-model .el-radio-group {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 30px;
  left: 700px;
}

.FaultPanel-03-model:nth-last-child(1) {
  padding-bottom: 20px;
}

.FaultPanel-04 {
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859C;
}

.FaultPanel-04 .el-radio-group {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 15px;
  background: rgba(129, 133, 156, 0.05);
  width: 98%;
  height: 60px;
  padding-left: 20px;
}

.FaultPanel-04 .FaultPanel-04-group {
  position: relative;
}

.FaultPanel-04 .FaultPanel-04-group-DTC {
  position: absolute;
  width: 85%;
  height: 50%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 16px;
  left: 200px;
  top: 12px;
  border-bottom: 1px solid #81859C;
}

.FaultPanel-05 {
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859C;
}

.FaultPanel-05-model-panel {
  position: relative;
  width: 30%;
  min-height: 100px;
  border-radius: 15px;
  background: rgba(129, 133, 156, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}

.FaultPanel-05-model {
  width: 95%;
  height: 30px;
  border: 1px solid #81859c;
  margin-top: 10px;
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-radius: 10px;
  font-size: 16px;
}

.FaultPanel-05-model-panel>div:nth-last-child(1) {
  margin-bottom: 10px;
}

.FaultPanel-05-model-panel span {
  margin-left: 10px;
}

// .FaultPanel-05-model-panel .elscrollbar {
//   position: absolute;
//   height: 100%;
//   width: 100%;
// }
// .FaultPanel-05-model-panel .el-scrollbar__view {
//   display: flex;
//   flex-wrap: wrap;
// }

.FaultPanel-06-item {
  position: absolute;
  padding-top: 10px;
  width: 30%;
  height: 30px;
}

.FaultPanel-06-item span {
  position: absolute;
  font-size: 16px;
  width: 200px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.FaultPanel-06-item>span:nth-child(1) {
  left: 0px;
}

.FaultPanel-06-item>span:nth-child(2) {
  left: 300px;
}

.FaultPanel-06>div:nth-child(2) {
  width: 30%;
  border-radius: 15px;
  background: rgba(129, 133, 156, 0.05);
}

.FaultPanel-06-model-panel {
  position: relative;
  padding-top: 35px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859C;
}

.FaultPanel-06-model {
  margin-top: 20px;
}

.FaultPanel-06-model>span:nth-child(1) {
  position: absolute;
  font-size: 16px;
  width: 300px;
  height: 30px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  left: 20px;
  border-bottom: 1px solid #81859C;
  cursor: pointer;
}

.FaultPanel-06-model>span:nth-child(2) {
  position: absolute;
  font-size: 16px;
  width: 200px;
  height: 30px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  left: 200px;
}

.FaultPanel-06-model .el-radio-group {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 30px;
  left: 300px;
}

.FaultPanel-06-model:nth-last-child(1) {
  padding-bottom: 20px;
}

.FaultPanel-07 {
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859C;
}

.FaultPanel-07-model-panel {
  position: relative;
  width: 30%;
  min-height: 100px;
  border-radius: 15px;
  background: rgba(129, 133, 156, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}

// .FaultPanel .FaultPanel-07-model-panel .infinite-list {
//   position: absolute;
//   height: 100%;
//   width: 100%;
// }
// .FaultPanel .FaultPanel-07-model-panel .el-scrollbar__view {
//   display: flex;
//   flex-wrap: wrap;
// }
.FaultPanel-07-Model {
  width: 95%;
  height: 30px;
  border: 1px solid #81859c;
  margin-top: 10px;
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-radius: 10px;
  font-size: 16px;
}

.FaultPanel-07-Model span {
  margin-left: 10px;
}

.FaultPanel-07-model-panel>div:nth-last-child(1) {
  margin-bottom: 10px;
}

// .FaultPanel-07 .FaultPanel-07-model-panel .el-scrollbar__wrap {
//   overflow-x: hidden;
// }
.ResultDetails-Option-dropdown .el-button {
  width: 220px;
  height: 40px;
  background: rgba(129, 133, 156, 0.1);
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  border: none;
  border-radius: 0px 20px 20px 0px;
  color: black;
}
</style>
